<template>
<div>
     <!--  翁锦霖 -->
      <myheader></myheader>
    <!-- 头部背景图-->
    <div class="img-header"></div>
    <!-- 中间导航栏-->
    <div class="navigation1">
        <ul>
            <li v-for="(navigation, index) in navigations" :key="'navigation-' + index">
                <a @click="gotoPage(navigation.id)">{{ navigation.name }}</a>
            </li>
        </ul>
    </div>
    <!-- 有图案的背景图-->
    <div class="body">
        <!-- 方案概述 盒子+内容-->
        <div class="content">
            <!-- 内容盒子-->
            <div class="content-Box">
                <!-- 方案概述的名字-->
                <span>{{programmeOverview.name}}</span>
                <!--方案概述的内容 -->
                <div class="content-box1">
                    <div class="title">
                        {{programmeOverview.content}}
                    </div>
                    <!--方案概述的图片 -->
                    <div class="picture">
                        <img :src="programmeOverview.url" alt="">
                    </div>
                </div>
            </div>
            <!-- 培养模式的盒子-->
            <div class="content-Box">
                <!-- 培养模式的名字-->
                <span>{{trainingMode.name}}</span>
                <!-- 培养模式的内容-->
                <div class="content-box2">
                    {{trainingMode.content}}
                </div>
                <!-- 培养模式的图片1-->
                <div class="commonly">
                    <div class="commonly2">
                        <img :src="trainingMode.url" alt="" />
                    </div>
                    <!-- 培养模式的图片1-->
                    <div class="commonly1">
                        <img :src="trainingMode.url1" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 特色培养盒子-->
        <div class="content-Box1">
            <!-- 特色培养内容-->
            <div class="content4">
                <!-- 特色培养内容名称-->
                <div class="title1">{{cultivationCharacteristics.name}}</div>
                <!-- 存放真实图片和内容的 盒子-->
                <div class="characteristic-Box">
                    <div>
                        <!-- 存放两张真实图片的 第一个盒子-->
                        <div class="characteristic-Box">
                            <div>
                                <img :src="cultivationCharacteristics.url" alt="" />
                                <div class="real-Work">{{cultivationCharacteristics.title}}</div>
                            </div>
                            <div>
                                <img :src="cultivationCharacteristics.url1" alt="" />
                                <div class="real-Case">{{cultivationCharacteristics.title1}}</div>
                            </div>
                        </div>
                        <!-- 存放两张真实图片的 第二个盒子-->
                        <div class="characteristic-Box">
                            <div>
                                <img :src="cultivationCharacteristics.url2" alt="" />
                                <div class="real-Case">{{cultivationCharacteristics.title2}}</div>
                            </div>
                            <div>
                                <img :src="cultivationCharacteristics.url3" alt="" />
                                <div class="real-Work">{{cultivationCharacteristics.title3}}</div>
                            </div>
                        </div>
                    </div>
                    <!-- 真实案例教学的盒子-->
                    <div class="teaching-Case">
                        <div class="teaching-Content">{{realCaseTeaching.name}}</div>
                        <div>
                            <img class="teaching-Icon" :src="url" />
                            <div class="teaching-Title">{{realCaseTeaching.content}}</div>
                        </div>
                        <div>
                            <img class="teaching-Icon1" :src="url" />
                            <div class="teaching-Title1">{{realCaseTeaching.content1}}</div>
                        </div>
                        <div class="teaching-Icon2">
                            <img :src="realCaseTeaching.url1" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 工坊方向盒子-->
        <div class="content2">
            <!-- 工坊方向内容名称-->
            <div class="title1">{{workshopDirection.name}}</div>
            <!-- 工坊方向内容+图标-->
            <div class="icon">
                <div><img :src="url" /></div>
                <div class="paragraph">
                    {{workshopDirection.content}}
                </div>
            </div>
            <div class="icon1">
                <div><img :src="url" /></div>
                <div class="paragraph1">
                    {{workshopDirection.content1}}
                </div>
            </div>
            <!--for循环 工坊方向的几个盒子+方向详细内容 -->
            <div class="workshop-Direction">
                <div class="teaching-Case1" v-for="(teaching,index) in teachings" :key="'teaching-' + index">
                    <div class="teaching-Icon3">
                        <img :src="teaching.url"> </div>
                    <div class="teaching-Title2">{{teaching.title}}</div>
                    <div class="teaching-Title3">{{teaching.content}}</div>
                </div>
            </div>
        </div>
        <!-- 培养流程盒子 -->
        <div class="content-Box1">
            <div class="content4">
                <div class="title1">{{trainingProcess}}</div>
                <div class="characteristic-Box">
                    <div class="imgs"></div>
                </div>
            </div>
        </div>
        <!-- 方案咨询盒子-->
        <div class="img-foot">
            <div class="content4">
                <!-- 方案咨询内容名字-->
                <div class="title2">{{programmeConsultation.name}}</div>
                <!-- 方案咨询内容-->
                <div class="content3">{{programmeConsultation.content}}</div>
                <!-- 方案咨询输入框-->
                <div class="content-box3">
                    <div class="commonly">
                        <div class="input-box">
                            <p class="stars">{{starts}}</p>
                            <p class="input-name">姓名</p>
                            <a-input placeholder="请输入您的名字" class="input1" />
                        </div>
                        <div class="input-box">
                            <p class="stars">{{starts}}</p>
                            <p class="input-name">所在地</p>
                            <a-select class="input1" placeholder="请选择您的所在地">
                                <a-select-option value="test1"> test1 </a-select-option>
                                <a-select-option value="test2"> test2 </a-select-option>
                            </a-select>
                        </div>
                    </div>
                    <div class="content-box4">
                        <div class="input-box">
                            <p class="stars">{{starts}}</p>
                            <p class="input-name">电话</p>
                            <a-input placeholder="请输入您的名字" class="input1" />
                        </div>
                        <div class="input-box1">
                            <p class="stars">{{starts}}</p>
                            <p class="input-name1">院校/企业名称</p>
                            <a-input placeholder="请输入您的名字" class="input1" />
                        </div>
                    </div>
                    <!-- 方案咨询 留言框-->
                    <div class="textarea-box">
                        <p class="stars">{{starts}}</p>
                        <p class="input-name">您想咨询的问题</p>
                        <a-textarea placeholder="请输入您想咨询的问题..." class="textarea1" />
                    </div>
                    <a-button class="button1">提交 </a-button>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 --> 
    <mybottom></mybottom> 
</div>
</template>

<script>
import myheader from '@/components/Header.vue';
import mybottom from '@/components/Bottom.vue';
export default {
    components:{myheader,mybottom},
    data() {
        return {
            trainingProcess: "培养流程",
            url: require('../../../src/assets/direction.png'),
            starts: "*",
            programmeOverview: {
                name: "方案概述",
                content: "以深化企业改革、加大技能人才培养为宗旨，以满足培育壮大发展新动能、促进产业转型升级和提高企业竞争力为根本，以产教融合、校企合作为重要手段。发挥校企双方培养主体作用，培养和评价“双结合”，企业实训基地和院校培训基地“双基地”，企业导师和院校导师“双导师”培养模式，开展企业新型学徒制培养工作。",
                url: require('../../../src/assets/fangan1.png'),

            },
            trainingMode: {
                name: "培养模式",
                content: "工坊充分发挥校企双方培养主体作用，培养和评价“双结合”，企业实训基地和院校培训基地“双基地”，企业导师和院校导师“双导师”培养模式，依托培训中心采取“师带徒”的方式，开展企业新型学徒制培养工作。",
                url: require('../../../src/assets/peiyang1.png'),
                url1: require('../../../src/assets/sanweirencai.png')
            },
            cultivationCharacteristics: {
                name: "培养特色",
                url: require('../../../src/assets/tesepeiyang1.png'),
                title: "真实工作过程",
                url1: require('../../../src/assets/tesepeiyang2.png'),
                title1: "真实工程案例",
                url2: require('../../../src/assets/tesepeiyang3.png'),
                title2: "真实商业项目",
                url3: require('../../../src/assets/tesepeiyang4.png'),
                title3: "真实商业项目",
            },
            realCaseTeaching: {
                name: "真实案例教学",
                content: "工匠工坊既是教学实训场所也是工作场所，学习的内容是工作,通过工作实现学习。",
                content1: "以“双元制”为理论基础，以工坊为载体，开展“四个真实”的项目式案例教学，培养具有工匠精神和精湛技艺的技术技能型人才。",
                url1: require('../../../src/assets/anlijiaoxue.png'),

            },
            workshopDirection: {
                name: "工坊方向",
                content: "目前工匠工坊开设有7个方向，每个工坊方向培养的都是IT行业热门岗位需要的技能型，创新型人才。",
                content1: "单个工坊课程体系是由若干个由易及难的项目案例组成，学生学习完这些项目案例，相应开发技能获得逐步提升，一个培养周期结束，学生们就具备了对接工作岗位的相关技能。"
            },

            navigations: [{
                    id: 1,
                    name: '方案概述',
                },
                {
                    id: 2,
                    name: '培养模式',
                },
                {
                    id: 3,
                    name: '培养特色',
                },
                {
                    id: 4,
                    name: '工坊方向',
                },
                {
                    id: 5,
                    name: '培养流程',
                },
            ],
            teachings: [{
                    url: require('../../../src/assets/chilun.png'),
                    title: "云计算综合运维管理工匠工坊",
                    content: "本专业面向云计算系统运维、云计算售前技术支持、云计算售后技术支持三个岗位。"
                },
                {
                    url: require('../../../src/assets/xiaochengxu.png'),
                    title: "微信小程序应用开发工匠工坊",
                    content: "可满足微信小程序开发工程师、Web前端开发工程师、PHP开发工程师的岗位需求。"
                },
                {
                    url: require('../../../src/assets/TV.png'),
                    title: "视频直播APP应用开发工匠工坊",
                    content: "Android开发工程师、Android讲师、Android SDK开发工程师、Android游戏SDK开发工程师、移动应用开发工程师、Android架构师、Android逆向开发工程师、软件测试工程师。"
                },
                {
                    url: require('../../../src/assets/xiaochengxu.png'),
                    title: "游戏应用开发工匠工坊",
                    content: "满足Unity游戏前端工程师、虚拟现实开发工程师、模拟仿真软件工程师的岗位需求。"
                },
                {
                    url: require('../../../src/assets/xiaochengxu.png'),
                    title: "企业SaaS云应用开发工匠工坊",
                    content: "数据开发工程师、数据分析师等,该方向对口针对数据有特殊要求的分析及整合，负责存储数据进行管理的企业等。"
                },
                {
                    url: require('../../../src/assets/xiaochengxu.png'),
                    title: "大数据分析与应用开发工匠工坊",
                    content: "大数据运维工程师,该方向市场需求中等，更偏向于Linux云计算学科"
                },
                {
                    url: require('../../../src/assets/xiaochengxu.png'),
                    title: "机器学习应用开发工匠工坊",
                    content: "机器学习工程师、算法工程师、机器学习等，该方向市场需求大,是本工坊培训的重点。"
                },
            ],
            programmeConsultation: {
                name: "方案咨询",
                content: "我们将根据您所填写的信息与您联系，进一步了解适合您的人才培养解决方案，确认使用需求。",

            }
        };
    },

    methods: {
        gotoPage: function (id) {
            if (id == 1) {
                window.location.href = 'www.baidu.com';
            } else if (id == 2) {
                window.location.href = 'www.taobao.com';
            } else if (id == 3) {
                window.location.href = 'www.baidu.com';
            } else if (id == 4) {
                window.location.href = 'www.taobao.com';
            } else if (id == 5) {
                window.location.href = 'www.baidu.com';
            }

        }

    },
};
</script>

<style scoped>
.commonly {
    display: flex;
}

.commonly1 {
    margin-left: 75px;
    margin-top: 45px
}

/**头部背景图 */
.img-header {
    margin: 0 auto;
    width: 100%;
    height: 420px;
    background: url('../../../src/assets/imgHeader.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    /* background-origin: 50%; */
    /* background-size: 100%; */
}

ul {
    list-style-type: none;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    border: 1px solid #f0f0f0;
    justify-content: center;
}

li a {
    display: block;
    color: #747474;
    padding: 10px 20px;
    margin-left: 100px;
    width: 100px;
    /* text-decoration: none; */
}

.navigation1 {
    margin-left: -100px;
}

/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #f2f2f2;
    color: #3569da;
}

.body {
    background: url('../../../src/assets/imgBody.png') no-repeat;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
}

.content {
    width: 1200px;
    height: 1080px;
    margin: 0 auto;
    justify-content: center;
    margin-top: 20px;
}

.content-Box {
    margin-top: 50px;
}

span {
    margin-left: 570px;
    color: black;
    font-weight: 600;
    font-size: 30px;
}

.content-box1 {
    width: 1200px;
    height: 280px;
    background-color: #ffffff;
    box-shadow: 0px 0px 3px 3px #e4dcdc;
    margin-top: 50px;
    display: flex;
}

.title {
    width: 600px;
    height: 188px;
    font-size: 16px;
    color: black;
    /* box-sizing: border-box; */
    margin-left: 78px;
    margin-top: 82px;
    /* font-family: Adobe 黑体 Std; */
    letter-spacing: 0.5px;
    line-height: 2;
}

.picture {
    margin-left: 90px;
    margin-top: 40px;
}

.content-box2 {
    width: 830px;
    height: 131px;
    margin: auto;
    font-size: 16px;
    color: black;
    margin-top: 45px;
    justify-content: center;
    letter-spacing: 0.8px;
    line-height: 2;
}

.content-Box1 {
    width: 100%;
    height: 800px;
    background-color: #f9f9f9;
}

.content2 {
    width: 1200px;
    /* width: 100%; */
    height: 1000px;
    margin: 0 auto;
    justify-content: center;
}

.title1 {
    margin-left: 570px;
    color: black;
    font-weight: 600;
    font-size: 30px;
    padding-top: 65px;
}

.characteristic-Box {
    display: flex;
    margin-top: 30px;
}

.teaching-Case {
    width: 476px;
    height: 476px;
    margin-top: 55px;
    background-color: white;
    box-shadow: 0px 0px 15px 1px rgb(226 222 222)
}

.teaching-Content {
    color: #2e71fe;
    font-size: 24px;
    margin-top: 60px;
    margin-left: 40px;
}

.teaching-Icon {
    margin-top: 50px;
    margin-left: 35px;
}

.teaching-Icon1 {
    margin-top: 40px;
    margin-left: 35px;
}

.teaching-Icon2 {
    margin-top: 55px;
    margin-left: 320px
}

.teaching-Title1 {
    width: 365px;
    margin-left: 65px;
    margin-top: -30px;
    font-size: 13px;
    color: black;
    letter-spacing: 3px;
    /**字体间距 */
    line-height: 2;
    /**行间距 */
}

.teaching-Title {
    width: 365px;
    margin-left: 65px;
    margin-top: -30px;
    font-size: 13px;
    color: black;
    letter-spacing: 3px;
    /**字体间距 */
    line-height: 2;
    /**行间距 */
}

.real-Work {
    margin-left: 135px;
    margin-top: -20px;
    font-size: 12px;
    color: black;
    font-weight: 550;
}

.real-Case {
    margin-left: 180px;
    margin-top: -20px;
    font-size: 12px;
    color: black;
    font-weight: 550;
}

.icon {
    display: flex;
    padding: 30px;
}

.paragraph {
    margin-left: 20px;
    font-size: 16px;
    color: black;
}

.icon1 {
    display: flex;
    margin-left: 30px;
    /* margin-top: -20px; */
    margin-top: 10px;
}

.paragraph1 {
    margin-left: 20px;
    font-size: 16px;
    color: black;
    width: 850px;
    line-height: 2;
    margin-top: -5px;
}

.workshop-Direction {
    /* margin-top:-10px; */
    display: flex;
    flex-flow: wrap;
    /*盒子会自动掉下来*/
}

.teaching-Case1 {
    width: 270px;
    height: 300px;
    margin-left: 21px;
    margin-top: 30px;
    background-color: blaclk;
    box-shadow: 0px 0px 15px 1px rgb(226 222 222)
}

.teaching-Icon3 {
    margin-left: 110px;
    margin-top: 30px;
    width: 100%;
    height: 50px;
}

.teaching-Title2 {
    text-align: center;
    margin-top: 25px;
    font-weight: 700;
    color: black;
    font-size: 16px
}

.teaching-Title3 {
    width: 230px;
    margin-left: 25px;
    margin-top: 15px;
    box-sizing: border-box;
    line-height: 2;
    font-size: 13px;
}

.imgs {
    margin: 0 auto;
    width: 1200px;
    height: 600px;
    background: url('../../../src/assets/teseliucheng.png');
    /* background-position: 50% 50%; */
    background-repeat: no-repeat;
    /* background-origin: 50%; */
    /* background-size: 100%; */
}

.img-foot {
    margin: 0 auto;
    width: 100%;
    height: 630px;
    background: url('../../../src/assets/jishufangan.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    /* background-origin: 50%; */
    /* background-size: 100%; */
}

.title2 {
    margin-left: 570px;
    color: white;
    font-weight: 300;
    font-size: 24px;
    padding-top: 50px;
    letter-spacing: 3px;
}

.content3 {
    width: 630px;
    height: 30px;
    margin: auto;
    font-size: 13px;
    color: white;
    font-weight: 300;
    margin-top: 20px;
    justify-content: center;
    letter-spacing: 2px;
}

.content4 {
    width: 1200px;
    /* height:  ;  */
    margin: 0 auto;
    justify-content: center;
}

.content-box3 {
    width: 1200px;
    height: 410px;
    background-color: #ffffff;
    /* box-shadow: 0px 0px 3px 3px #e4dcdc; */
    margin-top: 20px;
    /* display: flex; */
}

.content-box4 {
    display: flex;
    margin-top: -30px;
}

.input-box {
    display: flex;
    margin-left: 180px;
    margin-top: 50px;
}

.textarea-box {
    width: 950px;
    height: 110px;
    display: flex;
    margin-left: 110px;
    margin-top: 30px
}

.stars {
    color: red;
    margin-top: 10px;
}

.input-name {
    margin-top: 7px;
    margin-left: 5px;
    font-weight: 900;
}

.input1 {
    width: 300px;
    height: 35px;
    margin-left: 5px;
}

.input-name1 {
    margin-top: 7px;
    margin-left: 5px;
    font-weight: 900;
}

.input-box1 {
    display: flex;
    margin-left: 132px;
    margin-top: 50px;
}

.textarea1 {
    width: 835px;
    margin-left: 5px;
    height: 120px;
}

.button1 {
    width: 200px;
    height: 40px;
    margin-left: 500px;
    margin-top: 30px;
    color: white;
    background-color: #2e71fe;
    border-radius: 100px
}
</style>
